.account {
  padding-top: 2rem !important;
  display: flex;
  padding-bottom: 2rem !important;
  ::-webkit-scrollbar {
    width: 6px;
    height: 0px;
  }

  ::-webkit-scrollbar-track {
    border-radius: 3px;
    background-color: #f4f5f6;
    z-index: 10;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 0.5rem;
    height: 100px;
    background-color: #dcdcdc;
  }
  .account-frame {
    flex: 1;
    clear: both;
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    align-items: flex-start;
    font-family: "Helvetica";

    .vips-frame {
      font-family: "Helvetica";
      position: relative;
      width: 1.2rem;
      height: 1.1rem;
      background: #da251d;
      padding: 2px 8px 2px 2px;
      display: flex;
      align-items: center;

      .grade-img {
        width: 0.8rem;
        height: 0.8rem;
        object-fit: contain;
      }

      .grade {
        position: absolute;
        bottom: -3px;
        right: 2px;
        font-size: 0.6rem;
        color: #fff;
      }
    }

    .grade-frame {
      width: 28px;
      height: 22px;
      background: red;
      padding: 2px 8px 2px 2px;
      display: flex;
      align-items: center;
      position: relative;

      .grade-img {
        width: 18px;
        height: 18px;
        object-fit: contain;
      }

      .grade {
        position: absolute;
        bottom: 1px;
        right: 1px;
        font-size: 16px;
        color: #fff;
      }
    }

    .left {
      width: 253px;
      padding: 10px;
      max-width: 100%;
      background: #fff;
      display: inline-block;

      .div1 {
        display: flex;
        align-items: center;
        height: 81px;
        margin-bottom: 36px;

        .nameImg {
          width: 62px;
          height: 61px;
        }

        .name {
          margin-left: 14px;
          font-size: 14px;
        }

        .nameI {
          margin-left: 26px;
          display: inline-block;
          width: 22px;
          height: 22px;
          background: #da251d;
          position: relative;

          .img1 {
            width: 16px;
            height: 16px;
            position: absolute;
            top: 4px;
            left: 1px;
          }

          .img2 {
            width: 6px;
            height: 9px;
            position: absolute;
            top: 17px;
            left: 24px;
          }
        }
      }

      .div2 {
        height: 48px;
        display: flex;
        margin-bottom: 28px;
        justify-content: space-between;

        .line {
          flex: 1;
          height: 48px;
          margin-right: 12px;

          .name {
            height: 18px;
            line-height: 18px;
            background: #fff500;
            font-size: 11px;
            color: rgba(0, 0, 0, 0.5);
          }

          .value {
            height: 30px;
            line-height: 30px;
            background: #edecf5;
            font-size: 11px;
            color: rgba(0, 0, 0, 0.5);
          }
        }

        .line:nth-child(3) {
          margin-right: 0 !important;
        }
      }

      .div3 {
        height: 120px;
        width: 119px;
        margin: 0 auto;

        .text {
          font-size: 16px;
          height: 17px;
          display: block;
          margin-bottom: 11px;
        }

        .number {
          width: 92px;
          height: 92px;
          margin: 0 auto;
          line-height: 92px;
          background: #fff500;
          border-radius: 100px;
          font-size: 20px;
        }
      }

      .div4 {
        height: 28px;
        margin-top: 43px;
        margin-bottom: 37px;
        display: flex;
        align-items: center;
        justify-content: center;

        .balance {
          display: inline-block;
          width: 72px;
          height: 28px;
          line-height: 28px;
          margin-right: 3px;
          background: #fff500;
          font-size: 14px;
          border: 0;
        }

        .number {
          display: inline-block;
          width: 72px;
          height: 28px;
          line-height: 28px;
          background: #fff;
          border: 1px solid #eee;
          font-size: 14px;
        }
      }
    }

    .left-frame {
      font-family: "Helvetica";
      border: 1px solid #eee;

      .photo-frame {
        width: 100%;
        clear: both;
        margin-top: 15px;
        position: relative;
        padding: 10px 0;
        display: flex;
        justify-content: center;

        .photo-panel {
          width: 100%;
          clear: both;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;

          img {
            width: 100px;
            height: 100px;
            object-fit: cover;
          }

          p {
            width: 100%;
            font-size: 16px;
            text-align: center;
            margin-top: 5px;
          }
        }

        .grade-frame {
          position: absolute;
          right: 0;
          top: 0;
          width: 28px;
          height: 22px;
          background: red;
          padding: 2px 8px 2px 2px;
          display: flex;
          align-items: center;

          .grade-img {
            width: 18px;
            height: 18px;
            object-fit: contain;
          }

          .grade {
            position: absolute;
            bottom: 1px;
            right: 1px;
            font-size: 16px;
            color: #fff;
          }
        }
      }

      .number-frame {
        width: 100%;
        clear: both;
        padding: 20px 0;
        border-bottom: 2px solid #dcdcdc;
        display: flex;

        .number-panel {
          flex: 1;
          clear: both;

          .number-title {
            font-size: 16px;
            line-height: 16px;
            color: #969799;
          }

          .number {
            font-size: 18px;
            line-height: 18px;
            margin-top: 20px;
          }
        }
      }

      .exper-frame {
        width: 100%;
        clear: both;
        margin-top: 20px;
        text-align: left;
        font-size: 15px;

        .exper-panel {
          width: 100%;
          height: 30px;
          display: flex;
          justify-content: space-between;
          align-items: center;



          .exper-btn {
            display: inline-flex;
            clear: both;
            padding: 5px 10px;
            border-radius: 5px;
            border: 1px solid #dcdcdc;
            cursor: pointer;

            span {
              margin-top: -1px;
            }
          }
        }

        .exper-num {
          line-height: 14px;
          margin-top: 5px;
        }

        /deep/.el-progress__text {
          margin-top: -4px;
        }
      }

      .sign-frame {
        width: 100%;
        height: 50px;
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: center;

        p {
          cursor: pointer;
          padding: 8px 10px;
          font-size: 16px;
          font-family: "BTBlack";
          background: #D1FFE0;
          border-radius: 3px;
        }
      }
    }

    .right-frame {
      width: 670px;
      max-width: 100%;
      min-height: 400px;
      clear: both;
      border: 1px solid #eee;
      font-family: "Helvetica";
      padding: 15px;

      .line {
        width: 100%;
        clear: both;
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .numberDiv {
          width: 70px;
          height: 24px;
          font-size: 14px;
          margin-left: 10px;
          line-height: 20px;
          border: 1px solid #dcdcdc;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .bottom {
          width: 80px;
          height: 24px;
          font-size: 14px;
          line-height: 20px;
          margin-left: 10px;
          background: #dcdcdc;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .tips-frame {
          width: 380px;
          max-width: 100%;
          clear: both;
          max-width: 100%;
          font-size: 0.7rem;
          line-height: 0.8rem;
          padding: 10px;
          border: 1px solid #dcdcdc;
        }
      }
    }

    .grade-frame {
      width: 28px;
      height: 22px;
      background: red;
      padding: 2px 8px 2px 2px;
      display: flex;
      align-items: center;
      position: relative;

      .grade-img {
        width: 18px;
        height: 18px;
        object-fit: contain;
      }

      .grade {
        position: absolute;
        bottom: 1px;
        right: 1px;
        font-size: 16px;
        color: #fff;
      }
    }

    .accountDetails_body {
      width: 100%;
      clear: both;
      margin-top: 1rem;
      min-height: 300px;
      color: #1F1A17;
      font-size: 0.7rem;
      font-family: "Helvetica";
    }

    .userinfo-panel {
      width: 600px;
      clear: both;
      max-width: 100%;
      padding: 0.5rem 0.8rem;
      background: #EA9CFF;
      font-family: "Helvetica";

      .name-frame {
        width: 100%;
        min-height: 1rem;
        clear: both;
        display: flex;
        font-family: "Helvetica";

        .name {
          flex: 1;
          clear: both;
          font-size: 1.2rem;
          line-height: 1rem;
          padding-right: 10px;
          font-family: "BTBlack";
        }

        .vips-frame {
          font-family: "Helvetica";
          position: relative;
          width: 1.2rem;
          height: 1.1rem;
          background: #da251d;
          padding: 2px 8px 2px 2px;
          display: flex;
          align-items: center;

          .grade-img {
            width: 0.8rem;
            height: 0.8rem;
            object-fit: contain;
          }

          .grade {
            position: absolute;
            bottom: -3px;
            right: 2px;
            font-size: 0.6rem;
            color: #fff;
          }
        }
      }

      .number-frame {
        width: 100%;
        clear: both;
        display: flex;
        padding: 5px 0;
        margin-top: 10px;
        border-bottom: 1px solid #fff;

        .number-panel {
          flex: 1;
          clear: both;

          .label {
            font-size: 0.8rem;
            color: #676667;
          }

          .number {
            margin-left: 0.3rem;
          }
        }
      }

      .process-frame {
        width: 100%;
        clear: both;
        margin-top: 20px;

        .process-panel {
          margin-top: 15px;
          width: 100%;
          clear: both;

          .process-top {
            font-size: 0.7rem;
            display: flex;
            justify-content: space-between;
            line-height: 1rem;

            .btn {
              font-size: 0.6rem;
              padding: 0.2rem 0.3rem;
              border: 1px solid #fff;
            }
          }
        }
      }
    }

    ._sign {
      width: 100%;
      clear: both;
      display: flex;
      justify-content: flex-end;
    }

    .sign-frame {
      clear: both;

      p {
        cursor: pointer;
        padding: 0.2rem 0.5rem;
        clear: both;
        font-size: 16px;
        font-family: "BTBlack";
        background: #E38CFF;
        border-radius: 10px;
      }
    }

    .user-frame {
      width: 100%;
      max-width: 100%;
      clear: both;
      padding: 1rem;
      border-radius: 0.5rem;
      background: #FBF1F8;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;

      .user-panel {
        width: 10rem;
        clear: both;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        justify-content: center;
        position: relative;
        padding: 0.5rem;

        .user-fast {
          width: 7rem;
          height:  7rem;
          border-radius: 100px;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: center;

          .user-img {
            width: 4rem;
            height:4rem;
            margin-top: -1rem;
          }
        }

        .vips-frame {
          position: absolute;
          right: 0;
          top: 0;
          background: #da251d;
        }

        .name {
          width: 100%;
          font-size: 1rem;
          line-height: 1rem;
          text-align: center;
          margin-top: 1rem;
          font-family: "BTBlack";
        }
      }

      .info-frame {
        width: 22rem;
        max-width: 100%;
        clear: both;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        .top-frame {
          width: 100%;
          clear: both;
          display: flex;
          padding: 0.8rem 0.5rem;

          .top-panel {
            min-width: 1rem;
            clear: both;
            padding: 0 1rem;
            font-size: 0.7rem;
            text-align: center;

            .label {
              font-family: "BTBlack";
            }

            .text {
              font-size: 0.8rem;
              margin-top: 0.5rem;
              font-family: "Helvetica";
              text-align: center;
            }
          }
        }

        .bottom-frame {
          width: 100%;
          clear: both;
          display: flex;
          flex-wrap: wrap;

          .bottom-panel {
            width: 280px;
            max-width: 100%;
            clear: both;
            padding: 1rem 1.5rem;

            .panel-title {
              width: 100%;
              font-size: 0.8rem;
              display: flex;
              align-content: center;
              align-items: center;
              .icon-panel{
                margin-left: 0.1rem;
              }
            }

            .panel-num {
              width: 100%;
              font-size: 0.6rem;
              margin-top: 0.3rem;
              font-family: "Helvetica";
            }
          }
        }
      }
    }

    .answer-frame {
      width: 100%;
      clear: both;
      display: flex;
      margin-top: 1rem;
      background: #f4f5f6;
      padding: 0.5rem;
      border-radius: 0.5rem;

      /deep/.el-tabs {
        width: 100%;

        .el-tabs__item {
          font-family: "BTBlack";
          font-size: 0.7rem;
        }
      }

      .answer-panel {
        width: 100%;
        height: 10rem;
        overflow-y: auto;
        .answer-fast:first-child{
          margin-top: 0;
        }
        .answer-fast {
          width: 100%;
          clear: both;
          padding: 0.5rem;
          border-radius: 0.25rem;
          background: #fff;
          font-family: "Helvetica";
          color: #676766;
          display: flex;
          margin-top: 0.5rem;
          .tips-frame {
            width: 80px;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;

            .tips-panel {
              width: 80px;
              height: 60px;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: center;
              font-size: 30px;

              .van-icon-await {
                color: #969799;
              }

              p {
                width: 90%;
                text-align: center;
                font-size: 14px;
                line-height: 14px;
              }
            }
          }

          .answer-past {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            .answer-title {
              width: 100%;
              font-size: 0.7rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
            }

            .answer-text {
              width: 100%;
              font-size: 0.7rem;
              line-height: 0.8rem;
              margin-top: 0.3rem;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              word-break: keep-all;
            }
            .answer-time{
              width: 100%;
              font-size: 0.6rem;
              line-height: 0.8rem;
              margin-top: 0.3rem;
              color: #969799;
            }
          }

        }
      }
    }

    .menber-frame{
      width: 100%;
      clear: both;
      margin-top: 0.5rem;
      .title{
        font-size: 0.8rem;
      }
      .menber-panel{
        width: 100%;
        clear: both;
        min-height: 5rem;
        background: #f4f5f6;
        padding: 15px;
        border-radius: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        .menber-fast:first-child{
          margin-top: 0;
        }
        .menber-fast{
          width: 100%;
          clear: both;
          padding: 5px 5px;
          border-radius: 0.25rem;
          background: #fff;
          display: flex;
          flex-wrap: wrap;
          margin-top: 0.5rem;
          .menber-past{
            width: 440px;
            max-width: 100%;
            padding: 5px 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.6rem;
            line-height: 0.8rem;
            color: #323233;
            font-family: "Helvetica";
            .num-frame{
              width: 200px;
              height: 1.15rem;
              border: 1px solid #dcdcdc;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .name-frame{
              width: 170px;
              height: 1.2rem;
              background: #eee;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }

  }

}
